﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Template/ace_admin_v1.4.0/components/spin.js/spin.js"></script>
<div class="row" id="app">
    <div class="col-xs-12">
        <!--人员列表-->
        <div class="row" id="list">
            <div class="col-xs-12">
                <div class="table-header">
                    教职工列表
                </div>
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="ace-icon fa fa-check"></i>
                    </span>

                    <input type="text" class="form-control search-query" placeholder="输入关键字" v-model="sousuo.keyword" @@keyup.enter="clickParent(1)">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-inverse btn-white" v-on:click="clickParent(1)">
                            <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                            搜索
                        </button>
                    </span>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <p>
                            <button class="btn btn-white btn-info btn-bold" v-on:click="p_AddData()">
                                <i class="ace-icon glyphicon glyphicon-plus bigger-120 blue"></i>
                                新增人员
                            </button>
                        </p>
                    </div>
                </div>
                <div>
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="center">
                                    账号/编号
                                </th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>手机号</th>
                                <th>所在科室</th>
                                <th>职务</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="tr in users">
                                <td class="center">
                                    {{tr.username}}
                                </td>
                                <td>{{tr.XingMing}}</td>
                                <td>
                                    <template v-if="tr.XingBie==0">
                                        未知
                                    </template>
                                    <template v-if="tr.XingBie==1">
                                        男
                                    </template>
                                    <template v-if="tr.XingBie==2">
                                        女
                                    </template>
                                </td>
                                <td>{{tr.ShouJiHao}}</td>
                                <td>{{tr.keshi.ksmc}}</td>
                                <td>{{tr.zwmc}}</td>
                                <td>
                                    <div class="btn-group">
                                        <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm " aria-expanded="true">
                                            操作
                                            <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                        </button>

                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="javascript:void(0)" v-on:click="p_EditData(tr)">编辑</a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)" v-on:click="p_PassWordRe(tr)">密码重置</a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)" v-on:click="p_DelData(tr.userinfoId)">删除</a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    <page v-on:func="p_GetDatas" v-bind:parentmsg="sousuo" ref="mychild"></page>
                </div>
            </div>
        </div>
        <!--人员信息-->
        <div class="row" id="info" style="display: none">
            <div class="col-xs-12  widget-container-col">

                <div class="widget-box" id="widget-box-1">
                    <div class="widget-header">
                        <h5 class="widget-title">教职工信息</h5>

                        <!-- #section:custom/widget-box.toolbar -->
                        <div class="widget-toolbar">
                            <div class="widget-menu">
                                <a href="#" data-action="settings" data-toggle="dropdown">
                                    <i class="ace-icon fa fa-bars"></i>
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right dropdown-light-blue dropdown-caret dropdown-closer">
                                    <li>
                                        <a data-toggle="tab" href="#dropdown1" v-on:click="ShowList()">返回列表</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- /section:custom/widget-box.toolbar -->
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right"> 账号/编号 </label>
                                    <div class="col-sm-9"><input type="text" placeholder="账号/编号" class="col-xs-10 col-sm-5" v-model="user.username" /></div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right"> 姓名 </label>
                                    <div class="col-sm-9"><input type="text" placeholder="姓名" class="col-xs-10 col-sm-5" v-model="user.XingMing" /></div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right"> 手机号 </label>
                                    <div class="col-sm-9"><input type="text" placeholder="手机号" class="col-xs-10 col-sm-5" v-model="user.ShouJiHao" /></div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right"> 性别</label>
                                    <div class="col-sm-3">
                                        <select class="form-control" v-model="user.XingBie">
                                            <option value="0">未选择</option>
                                            <option value="1">男</option>
                                            <option value="2">女</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right"> 所属科室</label>
                                    <div class="col-sm-3">
                                        <select class="form-control" v-model="user.keshi.ksid" @@change='CheckItem()'>
                                            <option value="0">未选择</option>
                                            <option v-for="option in keshilist" v-bind:value="option.ksid">{{option.ksmc}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right"> 职务</label>
                                    <div class="col-sm-3">
                                        <select class="form-control" v-model="user.zwid">
                                            <option value="0">未选择</option>
                                            <option v-for="option in zhiwulist" v-bind:value="option.zwid">{{option.zwmc}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="clearfix form-actions">
                                    <div class="col-md-offset-2 col-md-10">
                                        <button class="btn btn-white btn-info btn-bold" type="button" v-on:click="p_SaveData()">
                                            <i class="ace-icon fa fa-floppy-o bigger-120 blue"></i>
                                            保存
                                        </button>

                                        <button class="btn btn-white btn-warning btn-bold" type="button" v-on:click="ShowList()">
                                            <i class="ace-icon fa fa-trash-o bigger-120 orange"></i>
                                            取消
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>


            </div>
        </div>

    </div>
</div>
<script src="~/Scripts/JsModel/Model_JiaoZhiGong.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var vm = new Vue({
            el: '#app',
            data: {
                user: new JiaoZhiGong(),
                users: [],
                keshilist: [],
                zhiwulist: [{ zwid: -1, zwmc: "未加载" }],
                sousuo: { keyword: "", ksid: 0, zwid: 0, pageIndex: 1, pageSize: 20, total: 0,  totalPage: 0 }
            },
            methods: {
                p_DelData: function(userinfoId) {
                    var _self = this;
                    bootbox.confirm("你确定这个操作吗?",
                        function(result) {
                            if (result) {
                                axios.get('@Url.Action("Del", "JiaoZhiGongConfig")', { params: { userid: userinfoId } })
                                    .then(
                                        function(response) {
                                            bootbox.alert("成功",
                                                function() {
                                                    _self.p_GetDatas();
                                                });
                                        },
                                        function(response) {
                                            alert(response.status);
                                        }
                                    )
                                    .catch(
                                        function(error) {
                                            alert(error);
                                        }
                                    );
                            }
                        });

                },
                p_SaveData: function() {
                    var _self = this;
                    var readyData = _self.user;
                    axios.post("@Url.Action("Save", "JiaoZhiGongConfig")", readyData).then((response) => {
                            bootbox.alert("成功",
                                function() {
                                    _self.p_GetDatas();
                                    _self.ShowList();
                                });
                        },
                        (response) => {

                        }
                    ).catch(function(response) {
                        console.log(response);
                    });
                },
                p_EditData: function(obj) {
                    var _self = this;
                    _self.user = new JiaoZhiGong(obj);
                    _self.p_GetZhiWuDatas(obj.keshi.ksid);
                    _self.ShowEdit();
                },
                p_GetDatas: function (pageIndex, pageSize) {
                    var _self = this;
                    if (!pageIndex) {
                        _self.clickParent(_self.sousuo.pageIndex);
                    }
                    var para = {
                        params: {
                            keyword: _self.sousuo.keyword,
                            ksid: 0,
                            zwid: 0,
                            pageIndex: pageIndex,
                            pageSize: pageSize
                        }
                    }
                    $.showloading();
                    axios.get('@Url.Action("Gets", "JiaoZhiGongConfig")', para).then(
                            function(response) {
                                _self.users = [];
                                for (var i = 0; i < response.data.data.length; i++) {
                                    _self.users.push(response.data.data[i]);
                            }
                                _self.sousuo.total = response.data.total;
                            _self.sousuo.totalPage = countTopage(_self.sousuo.total, _self.sousuo.pageSize);
                                $.closeloading();
                            },
                            function(response) {
                                //alert(response.status);
                            }
                        )
                        .catch(
                            function(error) {
                                alert(error);
                            }
                        );
                },
                clickParent(index) {
                    this.$refs.mychild.goto(index);
                },
                p_AddData: function() {
                    var _self = this;
                    _self.user = new JiaoZhiGong();
                    _self.ShowEdit();
                },
                p_GetKeShiDatas: function() {
                    var _self = this;
                    axios.get('@Url.Action("GetKeShiList", "JiaoZhiGongConfig")').then(
                            function(response) {
                                _self.keshilist = [];
                                for (var i = 0; i < response.data.length; i++) {
                                    _self.keshilist.push(response.data[i]);
                                }
                            },
                            function(response) {
                                alert(response.status);
                            }
                        )
                        .catch(
                            function(error) {
                                alert(error);
                            }
                        );
                },
                p_GetZhiWuDatas: function(ksid) {
                    var _self = this;
                    axios.get('@Url.Action("GetKeShiZhiWuOption", "JiaoZhiGongConfig")', { params: { ksid: ksid } }).then(
                        function (response) {
                            _self.zhiwulist = [];
                            for (var i = 0; i < response.data.length; i++) {
                                _self.zhiwulist.push(response.data[i]);
                            }

                        },
                        function(response) {
                            alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            alert(error);
                        }
                    );
                },
                p_PassWordRe: function(tr) {
                    var _self = this;
                    bootbox.confirm("你确定这个操作吗?",
                        function(result) {
                            if (result) {
                                var readyData = { username: tr.username};
                                axios.post("@Url.Action("ResetPassword", "JiaoZhiGongConfig")", readyData).then((response) => {
                                        bootbox.alert("成功", function() {
                                        });
                                    },
                                    (response) => {

                                    }
                                ).catch(function(response) {
                                    console.log(response);
                                });
                            }
                        });
                },
            CheckItem: function () {
                var _self = this;
                _self.p_GetZhiWuDatas(_self.user.keshi.ksid);
            },
            ShowEdit: function () {
                $("#list").hide(function() {
                    $("#info").show();
                });
            },
            ShowList: function () {
                $("#info").hide(function() {
                    $("#list").show();
                });
            },
            Init: function() {

            }
        },
        created() {
            //console.log("页面初始化完成111");
        },
        mounted() {
            this.p_GetKeShiDatas();
            //this.p_GetDatas();
            },
            components: {
                page: {
                    template: "#page",
                    props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
                    data: function () {
                        return {
                            current: 1, // 当前页码
                            showItem: 5, // 最少显示5个页码
                            allpage: 0 // 总共的
                        }
                    },
                    computed: {
                        pages: function () {
                            var pag = [];
                            this.allpage = this.parentmsg.totalPage;
                            if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
                                //总页数和要显示的条数那个大就显示多少条
                                var i = Math.min(this.showItem, this.allpage);
                                while (i) {
                                    pag.unshift(i--);
                                }
                            } else { //当前页数大于显示页数了
                                var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
                                    i = this.showItem;
                                if (middle > (this.allpage - this.showItem)) {
                                    middle = (this.allpage - this.showItem) + 1;
                                }
                                while (i--) {
                                    pag.push(middle++);
                                }
                            }
                            return pag;
                        }
                    },
                    mounted: function () {
                        this.init();
                    },
                    methods: {
                        init: function () {
                            this.showItem = this.parentmsg.pageSize;
                            this.allpage = this.parentmsg.total;
                            this.goto(1);
                        },
                        goto: function (index) {
                            //if (index == this.current) return;
                            this.current = index;
                            this.parentmsg.pageIndex = index;
                            this.$emit('func', this.current, this.showItem); //通过此方法在子组件建立方法来调用父组件中的方法
                            this.allpage = this.parentmsg.totalPage;
                        }
                    }
                }
            }
        });
    })
</script>
